<template>
  <div class="row-wrapper">
    <el-row>
      <el-tabs type="border-card" style="width: 100%;">
        <el-tab-pane label="参与用户">
          <!--列表表格-->
          <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="date" label="日期"></el-table-column>
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column prop="address" label="地址"></el-table-column>
            <el-table-column label="状态">
              <template #default="scope">
                <el-tag v-if="scope.row.status===1" type="success">成功</el-tag>
                <el-tag v-else type="danger">失败</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template #default="scope">
                <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                <el-popconfirm title="确定要删除吗？" @confirm="confirmDelete(scope.row)">
                  <template #reference>
                    <el-button type="text" size="small">删除</el-button>
                  </template>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
          <!--分页-->
          <div>
            <el-row justify="end" style="margin-top: 16px">
              <el-pagination background layout="prev, pager, next,jumper" :total="1000"
                             @current-change="handleCurrentChange"/>
            </el-row>
          </div>
        </el-tab-pane>
        <el-tab-pane label="黑名单">
          <!--列表表格-->
          <el-table :data="tableData" style="width: 100%" border>
            <el-table-column prop="date" label="日期"></el-table-column>
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column prop="address" label="地址"></el-table-column>
            <el-table-column label="状态">
              <template #default="scope">
                <el-tag v-if="scope.row.status===1" type="success">成功</el-tag>
                <el-tag v-else type="danger">失败</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template #default="scope">
                <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                <el-popconfirm title="确定要删除吗？" @confirm="confirmDelete(scope.row)">
                  <template #reference>
                    <el-button type="text" size="small">删除</el-button>
                  </template>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
          <!--分页-->
          <div>
            <el-row justify="end" style="margin-top: 16px">
              <el-pagination background layout="prev, pager, next,jumper" :total="1000"
                             @current-change="handleCurrentChange"/>
            </el-row>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-row>

    <!-- 悬浮按钮 -->
    <div class="float-buttons">
      <el-button size="small">aaa</el-button>
      <el-button size="small">bbb</el-button>
    </div>
  </div>
</template>

<style scoped>
.row-wrapper {
  position: relative;   /* 作为定位包含块 */
}
.float-buttons {
  position: absolute;
  right: 12px;          /* 贴右边 */
  top: 8px;             /* 贴顶部，按需调 */
  z-index: 10;          /* 确保在最上层 */
}
</style>
<script setup lang="ts">
</script>